<template>
	<view class="box">
		<view class="header">
			<view class="flex-row circleTabs">
				<view class="circle-item" :class="{ 'circle-item-ac': it.id === circle_id }"
					@click="init(it.id)" v-for="it in tab" :key="it.id">
					<view class="circle-item-add-icon">
						<image :src="it.logo" mode="aspectFill" class="circle-img" />
					</view>
					<view class="circle-text ellipsis">{{it.name || ''}}</view>
					<view class="triangle" :class="{ active: it.id === circle_id }"></view>
				</view>
				<view class="circle-item-add" @click="toFindInterest">
					<view class="circle-item-add-icon">
						<view class="circle-item-add-icon-item">
							<uni-icons custom-prefix="iconfont" type="icon-jiahao" size="17"
								color="#ffffff"></uni-icons>
						</view>
					</view>
					<view class="circle-text">找兴趣</view>
					<view class="triangle"></view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-t">
				<view :style="{background: creator === 1 ? '#F6F7F8' : '#fff'}"></view>
			</view>
			<view class="loading" v-if="loading">
				<!-- <u-loading-page :loading="true"></u-loading-page> -->
				<u-loading-icon text="加载中" size="36" textSize="20" :vertical="true"></u-loading-icon>
			</view>
			<view class="content-c" v-if="!loading">
				<ManagementCoursesVue ref="ManagementCoursesVueRef" v-if="creator === 1"/>
				<ApplyVideoVue v-if="creator === 0" ref="ApplyVideoVueRef" :Is_it_displayed="Is_it_displayed" :circle_id="circle_id"/>
			</view>
			
		</view>
	</view>
</template>

<script>
	import ManagementCoursesVue from '../managementCourses/managementCourses.vue'
	import ApplyVideoVue from './applyVideo.vue'
	import {
		recently_visited_circle,
		circle_permission
	} from '@/common/http/api.js'
	export default {
		components:{
			ManagementCoursesVue,
			ApplyVideoVue
		},
		data(){
			return {
				
				tab: [],
				circle_id: '',
				creator: 1,
				Is_it_displayed: 0,
				loading: false
			}
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			if(this.creator === 1) {
				this.$refs.ManagementCoursesVueRef.onBottom()
			}
		},
		methods:{
			init(id){
				this.loading = true
				let data = {}
				if(id) {
					data['id'] = id
				}
				this.creator = 1
				recently_visited_circle(data).then(res=>{
					
					console.log(id,99)
					
					if(!id) {
						this.tab = res.data
						this.circle_id = res.data[0].id
					} else {
						this.circle_id = id
					}
					
					this.getPermission()
				})
				.catch(e => {
					this.loading = false
				})
			},
			getPermission(){
				
				circle_permission({circle_id: this.circle_id}).then(res=>{
					this.loading = false
					this.creator = res.data.creator
					this.Is_it_displayed = res.data.Is_it_real_name	
					if(this.creator == 1) {
						this.$nextTick(()=>{
							
							this.$refs.ManagementCoursesVueRef.reload(this.circle_id)
						})
					}
				})
				.catch(e => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #F6F7F8;
		min-height: 100vh;
	}
	/**
	 *   ————————————————————————————  开始  ————————————————————————————
	 */
	.header {
		width: 100%;
		background-color: #242232;
		// position: sticky;
		// top: 0;
		// left: 0;
		// z-index: 9;
		.circle-item {
			margin-right: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		
			.circle-img {
				width: 90rpx;
				height: 90rpx;
				background-color: #e9e9e9;
				border-radius: 10rpx;
			}
		
			.circle-text {
				width: 100rpx;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				margin: 10rpx 0;
		
			}
		}
		
		.circle-item-add-icon {
			width: 102rpx;
			height: 102rpx;
			border-radius: 20rpx;
			// background-color: #33303f;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 6rpx;
		
			&>view,
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx !important;
			}
		}
		
		.circle-text {
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			margin: 10rpx 0;
		}
		
		.circle-item:first-child {
			margin-left: 20rpx;
		}
		.circleTabs {
			overflow-x: scroll;
		}
		
		.search-box {
			background: #292639;
			padding-top: 6rpx;
		}
		
		.circle-item {
			box-sizing: border-box;
		}
		
		
		.circle-item-add {
			display: flex;
			flex-direction: column;
			align-items: center;
		
		
			.circle-text {
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				margin-bottom: 10rpx;
			}
		}
		
		.circle-item-ac {
			.circle-item-add-icon {
				background-color: #F4DEBF;
				border-radius: 20rpx;
			}
		
		}
		
		.circle-item-add-icon-item {
			background-color: #33303f;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.triangle {
			width: 0;
			height: 0;
			border-left: 15rpx solid transparent;
			border-right: 15rpx solid transparent;
			border-bottom: 15rpx solid #242232;
			/* 控制三角形高度和颜色 */
		
			&.active {
				border-bottom-color: #F6F7F8;
			}
		}
	}
	
	/**
	 *   ————————————————————————————— 结束 ————————————————————————————
	 */
	.content {
		// position: relative;
		position: relative;
		.loading {
			width: 100%;
			height: calc(100vh - 190rpx);
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F6F7F8;
		}
		.content-t {
			width: 100%;
			height: 20rpx;
			background: #292639;
			view {
				background: #F6F7F8;
				border-top-right-radius: 30rpx;
				border-top-left-radius: 30rpx;
				height: 20rpx;
			}
			
		}
		.content-c {
			width: 100%;
		}
	}
</style>